<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const semester = ref([
  "2019-2020-1"
]);
const grade = ref([
  {value: "01", label: "高一"},
  {value: "02", label: "高二"},
  {value: "03", label: "高三"},
]);
const classNo = ref([]);
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const classTableData = ref({
  lessons: ["一", "二", "三", "四", "五"],
  courses: [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
  ],
});
const getSemester = async () => {
  const result = await proxy.$api.getSemester();
  semester.value = result;
};
onMounted(() => {
  // 假设在组件挂载时初始化班级编号和名称
  classNo.value = [
    {value: "", label: ""},
  ];
  getSemester()
});

//  客户端进行查询班级编号和名称
const queryClass = async () => {
  const result = await proxy.$api.queryClass(value2.value);
  classNo.value.splice(0, classNo.value.length)
  value3.value = "";
  result.map((v) => {
    classNo.value.push({
      value: v.classNo,
      label: v.className,
    });
  })
}

// 查询课程表
const queryCoursePlan = async () => {

  classTableData.value.courses.map((item, index) => {
    //删除 索引从0开始的所有元素
    classTableData.value.courses[index].splice(
        0,
        classTableData.value.courses[index].length
    );
  });

  const courseData = await proxy.$api.queryCourseplan(value3.value);

  //level  控制 课程表第几列，也就是周几
  let level = 0;
  //times  控制 课程表第几行，也就是第几行
  let times = 0;

  for (let index = 0; index < courseData.length; index++) {
    times++;
    const item = courseData[index];
    if (parseInt(item.classTime) != times) {
      classTableData.value.courses[level].push("");
      index = index - 1;
    } else {
      classTableData.value.courses[level].push(
          item.realname +
          "-" +
          item.courseName +
          " (" +
          item.classroomNo +
          ")"
      );
    }
    if (times % 8 == 0) {
      level = level + 1;
    }
  }
  console.log(classTableData.value.courses)
  ElMessage({message: "查询成功", type: "success"});
}

const digital2Chinese = (num, identifier) => {
  const character = [
    "零",
    "一",
    "二",
    "三",
    "四",
    "五",
    "六",
    "七",
    "八",
  ];
  return identifier === "week" && (num === 0 || num === 7)
      ? "日"
      : character[num];
}
</script>


<!-- 课表 -->
<template>
  <div class="class-table">
    <div class="top-select" style="display: flex;">
      <el-select v-model="value1" placeholder="学期">
        <el-option v-for="item in semester" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="年级" @change="queryClass">
        <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="value3" placeholder="班级" @change="queryCoursePlan">
        <el-option v-for="item in classNo" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
          <tr style="width: 100%;">
            <th>时间</th>
            <th v-for="(weekNum, weekIndex) in classTableData.lessons.length" :key="weekIndex">
              {{ "周" + digital2Chinese(weekIndex + 1, "week") }}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr style="height: 75px;" v-for="(lesson, lessonIndex) in 8" :key="lessonIndex">
            <td>
              <p>{{ "第" + digital2Chinese(lessonIndex + 1) + "节" }}</p>
              <!-- <p class="period">{{ lesson }}</p> -->
            </td>

            <td v-for="(course, courseIndex) in classTableData.lessons" :key="courseIndex">
              <!-- 课程名称-教师-教室-上课时间(01) -->
              {{ classTableData.courses[courseIndex][lessonIndex] || "-" }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.class-table {
  display: flex;
  flex-direction: column;
  height: 100%;

  .top-select {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;

    .el-select {
      width: 200px;
    }
  }

  .table-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #F3E5FF; /* 轻柔的紫色背景 */
    border-radius: 8px;
    padding: 1rem;
  }

  .tabel-container {
    table {
      width: 100%;
      border-collapse: collapse;

      thead {
        th {
          background-color: #8E44AD; /* 深紫色 */
          color: white;
          font-weight: bold;
          padding: 1rem 0.5rem; /* 增加表头高度 */
          text-align: center;
          font-size: 14px;
          white-space: nowrap; /* 防止文本换行 */
        }

        th, td {
          // 修改第一列的宽度，这里设为50px作为示例，请根据实际需求调整
          &:first-child {
            width: 50px;
          }
        }

        // 允许其他列自动分配剩余空间
        &:not(:first-child) {
          flex-grow: 1;
        }
      }

      tbody {
        tr:nth-child(even) {
          background-color: #F8F9FB; /* 保持原有背景色，或调整为淡紫色系 */
        }

        td {
          padding: 0.5rem;
          text-align: center;
          font-size: 14px;
          color: #606266;
          white-space: nowrap; /* 防止文本换行导致的表格变形 */
          overflow: hidden;
          text-overflow: ellipsis; /* 显示省略号 */
        }

        td:first-child {
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  /* 可选：针对特定屏幕尺寸的调整 */
  @media (max-width: 768px) {
    .top-select .el-select {
      width: 100%;
    }
  }
}
</style>